<template>
  <view class="dmbox" :style="{'height': boxheight + 'px','background-image':'url('+background+')'}">
    <view v-for="(item, index) in dmlist" :key="index" class="dmlist">
      <view class="td">
        <view class="avaurl" :style="{'background-image':'url('+item.avaurl+')'}">
          <view class="xingji">
            <view v-for="(itm, inx) in item.xingji" :key="inx" class="star">
              ★
            </view>
          </view>
          <view class="gender female" v-if="item.gender == 2">♀</view>
          <view class="gender male" v-else>♂</view>
        </view>
        <view class="pa">
          <view class="nickname">
            <span style="font-size:14px;">{{ item.nickname }}</span>
          </view>
          <span class="golddm" v-if="item.titlename">{{ item.titlename }}</span>
        </view>
      </view>
      <view class="td1">
        <view>{{ item.desc }}</view>
      </view>
      <!-- <view class="td2">
         <span v-if="item.busy == 1" style="color:#f00">带本</span>
         <span v-else style="color:#fff">空闲</span>
       </view> -->
    </view>
    <view class="pages">{{ page }}/{{ totalpage }}</view>
  </view>
</template>

<script>
  // import dmdialog from '@/components/dmDialog'
  export default {
    // components: {
    //     dmdialog
    // },
    props: {
      shopid: 0,
      pptv: 0
    },
    data() {
      return {
        dmlist: {},
        page: 1,
        limit: 7,
        totalpage: 0,
        dms: 0,
        boxheight: 370,
        pptvv: 0,
        background: ''
      }
    },
    onLoad() {

    },
    mounted() {
      this.setboxheight()
      this.getDmList()
    },
    destroyed() {
      clearTimeout(this.timer)
    },
    methods: {

      setboxheight() {
        this.pptvv = this.pptv

        // eslint-disable-next-line eqeqeq
        if (this.pptvv == 1) {
          this.boxheight = 530
        } else {
          this.boxheight = 370
        }
      },
      getDmList() {
        this.$http({
          url: `/bigscreen/shopdm1`,
          data: {
            pptv: this.pptv,
            shop: this.shopid,
            page: this.page
          },
          method: 'post'
        }).then(response => {
          this.dmlist = response.list
          this.dms = response.count
          this.totalpage = response.totalpage
          this.background = response.background
        }).catch(error => {
          console.log(error)
        })
      },
      timer() {
        return setTimeout(() => {
          this.page++
          if (this.page > this.totalpage) {
            this.page = 1
          }
          this.getDmList()
        }, 10000)
      }
    },
    watch: {
        pptv(newVal,oldVal) {
            this.setboxheight()
        }
    },
    destroyed() {
      clearTimeout(this.timer)
    }
  }
</script>

<style lang="less">
  .dmbox {
      background-size: 100% 100%;
      display: flex;
      justify-content: flex-start;
      flex-direction: column;
      height: 370px;
      position: relative;
      .dmlistth{
          width: 100%;
          height: 50px;
  
          display: flex;
          justify-content: space-between;
          background-color: rgba(23,53,73,.5);
  
          .th{
            flex:1;
            text-align: center;
            height: 50px;
            line-height: 50px;
          }
          .th1{
            flex:1;
            text-align: center;
            height: 50px;
            line-height: 50px;
          }
      }
     .dmlist{
          width: 100%;
          border-bottom:1px solid #444;
          display: flex;
          justify-content: flex-start;
          .td{
              flex:1;
              height: 57px;
              padding: 3px 0 3px 8px;
              display:flex;
              justify-content: flex-start;
              align-items:center;
              .avaurl{
                  width: 40px;
                  height: 40px;
                  background-position: center;
                  background-size: 100% auto;
                  background-repeat: no-repeat;
                  background-color: #000;
                  position: relative;
                  .xingji{
                    position: absolute;
                    width: 100%;
                    top:-14px;
                    left: 0;
                    display: flex;
                    justify-content: center;
                    .star{
                      color: #eebf2f;
                      font-size: 14px;
                      text-shadow: 0 0 2px #000;
                    }
                  }
                  .gender{
                      font-weight:bolder;
                      position: absolute;
                      width: 16px;
                      height: 16px;
                      line-height: 16px;
                      font-size: 12px;
                      text-align: center;
                      background: #ddd;
                      border-radius: 50%;
                      right: 0;
                      bottom: 0;
                  }
                  .male{
                    color:#5dcdFA;
                  }
                  .female{
                    color:#ff29c0;
                  }
              }
              .pa{
                 margin-left: 4px;
                .golddm{
                  background-color:#eebf2f;
                  background-image: linear-gradient(to right,#eebf2f, #feb,#eebf2f);
                  color:#000;
                  padding:2px 4px;
                  font-size:12px;
                  border-radius:4px;
                  white-space: nowrap;
                }
              }
          }
          .td1{
            flex: 2;
            height: 46px;
            display:flex;
            justify-content: flex-start;
            align-items:center;
            view{
              width: 100%;
              font-size: 14px;
              display: -webkit-box;
              -webkit-line-clamp: 2;//限制文本的行数，只显示两行
              -webkit-box-orient: vertical;
              overflow: hidden;
            }
          }
          .td2{
            flex: 1;
            height: 46px;
            display:flex;
            justify-content: center;
            align-items:center;
            font-size: 14px;
          }
      }
      .dmlist:hover{
          background: rgba(255, 255, 255, 0.1);
      }
      .pages{
          position: absolute;
          right: 3px;
          bottom: 3px;;
          background: rgba(255,255,255,.5);
          color: #000;
          width: 30px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          border-radius: 50%;
          font-size: 12px;
      }
  }
</style>